<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="98%">
			<el-form>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="服务场景码" prop="ruleForm.name">
							<el-text class="mx-1">Default</el-text>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="交易名称" prop="ruleForm.description">
							<el-text class="mx-1">Default</el-text>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="服务场景码" prop="ruleForm.name">
							<el-text class="mx-1">Default</el-text>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="交易名称" prop="ruleForm.description">
							<el-text class="mx-1">Default</el-text>
						</el-form-item>
					</el-col><el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="服务场景码" prop="ruleForm.name">
							<el-text class="mx-1">Default</el-text>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="交易名称" prop="ruleForm.description">
							<el-text class="mx-1">Default</el-text>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column label="原始接口" align="center">
					<el-table-column prop="name" label="英文名称" show-overflow-tooltip></el-table-column>
					<el-table-column prop="description" label="中文名称" show-overflow-tooltip></el-table-column>
					<el-table-column prop="remarks" label="数据类型" show-overflow-tooltip></el-table-column>
					<el-table-column prop="name" label="长度" show-overflow-tooltip></el-table-column>
					<el-table-column prop="description" label="是否必输" show-overflow-tooltip></el-table-column>
					<el-table-column prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
				</el-table-column>
				<el-table-column label="" align="center">
					<template #default="scope">
						<div style="display: flex; align-items: center">
							<el-icon><timer /></el-icon>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="QZBSD" align="center">
					<el-table-column prop="name" label="英文名称" show-overflow-tooltip></el-table-column>
					<el-table-column prop="description" label="中文名称" show-overflow-tooltip></el-table-column>
					<el-table-column prop="remarks" label="数据类型（长度）" show-overflow-tooltip></el-table-column>
					<el-table-column prop="remarks" label="约束条件" show-overflow-tooltip></el-table-column>
					<el-table-column prop="description" label="是否必输" show-overflow-tooltip></el-table-column>
					<el-table-column prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
				</el-table-column>
				<el-table-column label="状态" align="center"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus'
import { msgHeaderApi } from './api';
import { ElMessage } from 'element-plus';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 引入 api 请求接口
const api = msgHeaderApi();

// 定义变量内容
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
			name:'',
		},
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {

};
// 取消
const onCancel = () => {
	closeDialog();
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
